<template>
  <div>
    <!-- 链接管理 -->
    <div class="model">
      <div class="tools">
        <el-button @click="add">添加</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="bh" label="编号"> </el-table-column>
          <el-table-column prop="mc" label="名称"> </el-table-column>
          <!-- <el-table-column prop="name" label="排列序号"></el-table-column> -->
          <el-table-column prop="cjr" label="创建人"> </el-table-column>
          <el-table-column prop="cjsj" label="创建时间"> </el-table-column>
          <el-table-column label="链接地址" prop="img_src"></el-table-column>
          <el-table-column label="链接图片">
            <template slot-scope="scope">
              <el-image :src="scope.row.img_src"></el-image>
            </template>
          </el-table-column>
          <el-table-column width="250" align="center" label="操作">
            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" type="primary"
                >查看</el-button
              > -->
              <el-button @click="edit(scope.row)" type="warning"
                >编辑</el-button
              >
              <el-button @click="del(scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <AddDialog
      v-if="dialogShow"
      ref="AddDialog"
      @closed="closed"
      :changeType="type"
      :rowData="rowData"
    ></AddDialog>
  </div>
</template>

<script>
import AddDialog from "./components/add-dialog.vue";
export default {
  components: { AddDialog },
  data() {
    return {
      rowData: {},
      type: "0",
      dialogShow: false,
      tableData: []
    };
  },
  methods: {
    del(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const delData = {
            pop: "2",
            id: row.bh,
            czr: this.$store.state.userCode
          };
          this.$http
            .get(this.$baseUrl.delAdmin, {
              params: delData
            })
            .then(res => {
              console.log(res);
            })
            .catch(() => {
              this.$message.error("服务器内部错误");
            });
        })
        .catch(() => {});
    },
    getData() {
      this.$http
        .get(this.$baseUrl.searchAdmin, {
          params: {
            pop: "2"
          }
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    edit(row) {
      this.type = "1";
      this.rowData = row;
      this.dialogShow = true;
      this.$nextTick(() => {
        this.$refs["AddDialog"].dialogInit();
      });
    },
    add() {
      this.type = "0";
      this.dialogShow = true;
      this.$nextTick(() => {
        this.$refs["AddDialog"].dialogInit();
      });
    },
    closed(val) {
      this.dialogShow = false;
      if (val) {
        this.getData();
      }
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style scoped lang="scss">
.model {
  .tools {
    padding: 30px 0;
    border-bottom: 1px solid #999;
    margin-bottom: 30px;
  }
}
</style>
